function trggerEvent(eventName, data) {
  $(window).trigger(eventName, data);
}

window.globalConfig = {
  pricePrecision: 4, //单价保留位数
  orderDefaultRowIndex:0
};

window.boardChartColor = [
  "#2ec7c9",
  "#b6a2de",
  "#5ab1ef",
  "#ffb980",
  "#d87a80",
  "#8d98b3",
  "#e5cf0d",
  "#97b552",
  "#95706d",
  "#dc69aa",
  "#07a2a4",
  "#9a7fd1",
  "#588dd5",
  "#f5994e",
  "#c05050",
  "#59678c",
  "#c9ab00",
  "#7eb00a",
  "#6f5553",
  "#c14089"
];

var dialogDragDirective = function () {
  var DragModel = function (el, binding) {
    var self = this;
    var defaultOption = {
      maximize: true,
      move: true,
      resize: true,
      minWidth: 400,
      minHeight: 300
    };

    var fn = {
      initData: function (el, binding) {
        var $dialog = $(el).find('.el-dialog');
        if ($dialog.length === 0) {
          throw new Error('该组件不是弹出框');
        }
        $dialog.addClass('sys-dialog-drag');
        self.$dialog = $dialog;
        self.$dialogHeader = $dialog.find('.el-dialog__header');
        var $dialogWrapper = $dialog.parents('.el-dialog__wrapper');
        $dialogWrapper.css('overflow', 'hidden');
        self.$dialogWrapper = $dialogWrapper;

        var obj = binding.value;
        var option = _.cloneDeep(defaultOption);
        _.assign(option, obj);
        self.option = option;

        var isFullscreen = $dialog.hasClass('is-fullscreen');
        self.isFullscreen = isFullscreen;
        self.initFullscreen = isFullscreen;
      },

      bindMaximizeEvent: function () {
        var $maximize = self.$maximize;
        var that = this;
        $maximize.on('click', function () {
          var isFullscreen = self.isFullscreen;
          if (isFullscreen) {
            that.toCancelMaximize();
            $(this).find('.maximize-btn').removeClass('cancel');
          } else {
            that.toMaximize();
            $(this).find('.maximize-btn').addClass('cancel');
          }
          self.isFullscreen = !isFullscreen;
        });
      },

      toCancelMaximize: function () {
        var $dialog = self.$dialog;
        $dialog.removeClass('is-fullscreen');
        if (self.initFullscreen) {

        }
        this.resetDialogDom();
      },

      toMaximize: function () {
        var $dialog = self.$dialog;
        $dialog.addClass('is-fullscreen');
      },

      bindDragMoveEvent: function () {
        var $dialogHeader = self.$dialogHeader;

        var that = this;
        $dialogHeader.on('mousedown', function (event) {
          if (self.isFullscreen) {
            return;
          }
          var $target = $(event.target);
          if ($target.parents('.header-btn').length > 0) {
            return;
          }

          event.preventDefault();
          var $dialogWrapper = self.$dialogWrapper;
          var wrapper = {
            width: $dialogWrapper.width(),
            height: $dialogWrapper.height()
          };

          that.setDialogPosition();
          that.setMousePosition(event);

          var mouseMoveFun = function (event) {
            var mousePosition = self.mousePosition;
            var rangX = event.clientX - mousePosition.x;
            var rangY = event.clientY - mousePosition.y;
            var position = self.position;
            var left = position.left + rangX;
            if (left < 0) {
              left = 0;
            } else if (wrapper.width < left + 150) {
              left = wrapper.width - 150;
            }
            position.left = left;

            var top = position.top + rangY;
            if (top < 0) {
              top = 0;
            } else if (wrapper.height < top + 50) {
              top = wrapper.height - 50;
            }
            position.top = top;
            that.setDialogDom('move');
            that.setMousePosition(event);
          }

          $(document).off('mousemove', mouseMoveFun);
          $(document).on('mousemove', mouseMoveFun);

          $(document).one('mouseup', function () {
            console.log('mouseup');
            $(document).off('mouseleave');
            $(document).off('mousemove', mouseMoveFun);
            self.position = undefined;
            self.mousePosition = undefined;
          });

          $(document).one('mouseleave', function () {
            console.log('mouseleave');
            $(document).off('mouseup');
            $(document).off('mousemove', mouseMoveFun);
            self.position = undefined;
            self.mousePosition = undefined;
          });
        });
      },

      setDialogPosition: function () {
        var $dialog = self.$dialog;
        var width = $dialog.width();
        var height = $dialog.height();
        var left = $dialog.css('margin-left');
        left = parseInt(left);
        var top = $dialog.css('margin-top');
        top = parseInt(top);
        self.position = {
          width: width,
          height: height,
          left: left,
          top: top
        };
      },

      setMousePosition: function (event) {
        var x = event.clientX;
        var y = event.clientY;
        self.mousePosition = {
          x: x,
          y: y
        };
      },

      limitDialog: function () {
        var $dialogWrapper = self.$dialogWrapper;
        var that = this;
        $dialogWrapper.resize(function () {
          if (self.isFullscreen) {
            return;
          }
          that.resetDialogDom();
        });
      },

      resetDialogDom: function () {
        var $dialogWrapper = self.$dialogWrapper;
        var totalWidth = $dialogWrapper.width();
        var totalHeight = $dialogWrapper.height();
        var $dialog = self.$dialog;
        var left = $dialog.css('margin-left');
        left = parseInt(left);
        var top = $dialog.css('margin-top');
        top = parseInt(top);

        if (left + 150 > totalWidth) {
          $dialog.css('margin-left', totalWidth - 150 + 'px');
        } else {
          $dialog.css('margin-left', left + 'px');
        }

        if (top + 50 > totalHeight) {
          $dialog.css('margin-top', totalHeight - 50 + 'px');
        } else {
          $dialog.css('margin-top', top + 'px');
        }

        var width = $dialog.width();
        if (width > totalWidth) {
          $dialog.width(totalWidth);
        } else {
          $dialog.width(width);
        }
        var height = $dialog.height();
        if (height > totalHeight - 60) {
          $dialog.find('.el-dialog__body>div').height(totalHeight - 60);
        } else {
          $dialog.find('.el-dialog__body>div').height(height);
        }
      },

      setDialogDom: function (type) {
        var position = self.position;
        var $dialog = self.$dialog;
        if (type === 'move') {
          $dialog.css('margin-left', position.left + 'px');
          $dialog.css('margin-top', position.top + 'px');
        } else if (type === 'resize-width') {
          $dialog.width(position.width);
        } else if (type === 'resize-height') {
          var height = position.height - 54;
          $dialog.find('.el-dialog__body>div').height(height);
        }
      },

      bindResizeEvent: function () {
        var $resizeWidth = self.$resizeWidth,
          $resizeHeight = self.$resizeHeight;
        var that = this;
        $resizeWidth.on('mousedown', function (event) {
          that.handleResizeEvent(event, 'width');
        });
        $resizeHeight.on('mousedown', function (event) {
          that.handleResizeEvent(event, 'height');
        });
      },

      handleResizeEvent: function (event, type) {
        if (self.isFullscreen) {
          return;
        }

        event.preventDefault();
        var $dialogWrapper = self.$dialogWrapper;
        var wrapper = {
          width: $dialogWrapper.width(),
          height: $dialogWrapper.height()
        };
        this.setDialogPosition();
        this.setMousePosition(event);

        var that = this;
        var mouseMoveFun = function (event) {
          var option = self.option;
          var position = self.position;
          var mousePosition = self.mousePosition;

          if (type === 'width') {
            var rangWidth = event.clientX - mousePosition.x;
            var width = position.width + rangWidth;
            var minWidth = option.minWidth;
            if (width < minWidth) {
              width = minWidth;
            } else if (width > wrapper.width) {
              width = wrapper.width;
            }
            position.width = width;
            $dialogWrapper.addClass('resizing-width');
          } else if (type === 'height') {
            var rangHeight = event.clientY - mousePosition.y;
            var height = position.height + rangHeight;
            var minHeight = option.minHeight;
            if (height < minHeight) {
              height = minHeight;
            } else if (height > wrapper.height) {
              height = wrapper.height;
            }
            position.height = height;
            $dialogWrapper.addClass('resizing-height');
          }
          that.setDialogDom(`resize-${type}`);
          that.setMousePosition(event);
        };

        $(document).on('mousemove', mouseMoveFun);
        $(document).one('mouseup', function () {
          $(document).off('mousemove', mouseMoveFun);
          self.position = undefined;
          self.mousePosition = undefined;
          if (type === 'width') {
            $dialogWrapper.removeClass('resizing-width');
          } else if (type === 'height') {
            $dialogWrapper.removeClass('resizing-height');
          }
        });
      }
    };

    this.addBtn = function () {
      var option = this.option;
      var $dialogHeader = this.$dialogHeader;
      if (option.move) {
        fn.bindDragMoveEvent();
        fn.limitDialog();
      }

      if (option.maximize) {
        var $btn = $('<div class="header-btn clearfix"></div>');
        var maximizeEl = '<button type="button" class="el-dialog__headerbtn"><div class="maximize-btn"></div></button>';
        var $maximize = $(maximizeEl);
        if (this.isFullscreen) {
          $maximize.find('.maximize-btn').addClass('cancel');
        }
        this.$maximize = $maximize;
        $btn.append($maximize);

        var $remove = $dialogHeader.find('.el-dialog__headerbtn');
        if ($remove.length !== 0) {
          $btn.append($remove);
        }
        $dialogHeader.append($btn);
        fn.bindMaximizeEvent();
      }

      if (option.resize) {
        var $dialog = self.$dialog;
        var $resizeWidth = $('<div class="sys-dialog-width-resize"></div>');
        self.$resizeWidth = $resizeWidth;
        $dialog.append($resizeWidth);

        var $resizeHeight = $('<div class="sys-dialog-height-resize"></div>');
        self.$resizeHeight = $resizeHeight;
        $dialog.append($resizeHeight);
        fn.bindResizeEvent();
      }
    };

    fn.initData(el, binding);
  };

  Vue.directive('dialogdrag', {
    bind: function (el, binding) {
      var dragObj = new DragModel(el, binding);
      dragObj.addBtn();
    }
  });
}();

Vue.prototype.formatImgUrl = function(url){
  if (url.startsWith('blob:')){
    return url;
  }
  if (url.indexOf('?') === -1) {
    url += '?imageMogr/auto-orient';
  } else {
    if (url.indexOf('imageMogr/') === -1) {
      url += '|imageMogr/auto-orient';
    }
  }
  return url;
};
